<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <div class="basic-info">
      <h3 class="info-title">基本信息</h3>
      <div class="info-grid">
        <div class="info-row">
          <span class="info-label">领料单号：</span>
          <span class="info-content">{{ formData.planNo }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">关联工单号：</span>
          <span class="info-content">{{ formData.docNo }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">工单数量:</span>
          <span class="info-content">{{ formData.itemCode }}</span>
        </div>
      </div>
    </div>

    <!-- 子表的表单 -->
    <el-tabs v-model="subTabsName">
      <el-tab-pane label="领料记录" name="materialRecord">
        <MaterialRecordForm ref="materialRecordFormRef" :material-id="formData.id" :planNo="formData.planNo" />
      </el-tab-pane>
    </el-tabs>
  </Dialog>
</template>
<script setup lang="ts">
import { MaterialPlanApi, MaterialPlanVO } from '@/api/opticore/materialplan'
import MaterialRecordForm from './components/MaterialRecordForm.vue'

/** 领料计划 表单 */
defineOptions({ name: 'MaterialPlanForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  docNo: undefined,
  planNo: undefined,
  itemCode: undefined,
  itemName: undefined,
  itemSpecification: undefined,
  itemDesc: undefined,
  drawingNo: undefined,
  unit: undefined,
  requiredQty: undefined,
  issuedQty: undefined
})
const formRules = reactive({})
const formRef = ref() // 表单 Ref

/** 子表的表单 */
const subTabsName = ref('materialRecord')
const materialRecordFormRef = ref()

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = '物料详情'
  formType.value = type
  // resetForm()
  // // 修改时，设置数据

  const res = await MaterialPlanApi.getMaterialPlan(id)

  if (res) {
    formData.value = res
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  // await formRef.value.validate()
  // 校验子表单
  try {
    await materialRecordFormRef.value.validate()
  } catch (e) {
    subTabsName.value = 'materialRecord'
    return
  }
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as MaterialPlanVO
    // 拼接子表的数据
    data.materialRecords = materialRecordFormRef.value.getData()
    if (formType.value === 'create') {
      await MaterialPlanApi.createMaterialPlan(data)
      message.success(t('common.createSuccess'))
    } else {
      await MaterialPlanApi.updateMaterialPlan(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    docNo: undefined,
    planNo: undefined,
    itemCode: undefined,
    itemName: undefined,
    itemSpecification: undefined,
    itemDesc: undefined,
    drawingNo: undefined,
    unit: undefined,
    requiredQty: undefined,
    issuedQty: undefined
  }
  formRef.value?.resetFields()
}
</script>
<style scope>
.basic-info {
  font-family: Arial, sans-serif;
  padding: 20px;
  /* background-color: #f9f9f9; */
  border-radius: 8px;
}

.info-title {
  font-size: 18px;
  margin-bottom: 20px;
  color: #333;
}

.info-grid {
  display: flex;
  /* justify-content: space-between; */
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.info-row {
  /* flex: 1; */
  width: 33.3%;
  display: flex;
  margin-right: 10px;
}

.info-label {
  font-weight: bold;
  color: #666;
  min-width: 100px;
}

.info-content {
  color: #333;

  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 文字溢出隐藏 */
  text-overflow: ellipsis; /* 出现省略号 */
}

.view-link {
  color: #1890ff;
  text-decoration: none;
  margin-left: 5px;
  cursor: pointer;
}

.other-info {
  margin-top: 15px;
}

.other-info .info-content {
  word-break: break-word;
}
</style>
